import { useState, useEffect } from "react";
import { Form, Radio, Select, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import AntdWrapper from "@/components/AntdWrapper";
import usePrint from "@/views/hooks/usePrint";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import { checkprintruleUpdateOp, getmakeinventoryConfig, queryExpressList } from "../service";
import IconFont from "@/components/IconFont";

const PrinterConfigModal = ({ visible, current, handleOk, handleCancel, fetchList }) => {
	const { printList, setPrintList, printOptions, getExpressRelativePrinter, setExpressRelativePrinter } = usePrint();
	const [form] = Form.useForm();
	const [oneItemShow, setOneItemShow] = useState(0);
	const [moreItemShow, setMoreItemShow] = useState(0);
	const [expressList, setExpressList] = useState([]);
	const [configObj, setConfigObj] = useState({});
	const [data, setData] = useState([]);
    const oneItemValue = Form.useWatch('oneItem', form);
    const moreItemValue = Form.useWatch('moreItem', form);
    const moreItemSingleValue = Form.useWatch('moreItemSingle', form);
	const getMakeinventoryConfig = async () => {
		const { data, success } = await getmakeinventoryConfig();
		if (success) {
			if (data) {
				console.log(data.oneMoreConfig.automaticDelivery, "data.oneMoreConfig.automaticDelivery ");
				console.log(data.oneMoreConfig.automaticDelivery == 1, "data.oneMoreConfig.automaticDelivery == 1");
				console.log(data.oneMoreConfig.notInStockPrint, "data.oneMoreConfig.notInStockPrint");
				console.log(data.oneMoreConfig.notInStockPrint == 1, "data.oneMoreConfig.notInStockPrint == 1");
				setData(data);
				setOneItemShow(data.oneItemConfig.unPrinter == 0 && data.oneItemConfig.uniqueCode == 0 ? 1 : 0);
				setMoreItemShow(data.oneMoreConfig.unPrinter == 0 && data.oneMoreConfig.uniqueCode == 0 ? 1 : 0);
				form.setFieldsValue({
					oneItem:
						(data.oneItemConfig.expressInvoice == 0 || data.oneItemConfig.expressInvoice == 1) &&
						data.oneItemConfig.uniqueCode == 0 &&
						data.oneItemConfig.unPrinter == 0
							? 0
							: data.oneItemConfig.expressInvoice == 0 && data.oneItemConfig.uniqueCode == 1 && data.oneItemConfig.unPrinter == 0
								? 1
								: 2,
					oneItemSingle: data.oneItemConfig.automaticDelivery == 1 ? data.oneItemConfig.automaticDelivery : 0,
					moreItem:
						(data.oneMoreConfig.expressInvoice == 0 || data.oneMoreConfig.expressInvoice == 1) &&
						data.oneMoreConfig.uniqueCode == 0 &&
						data.oneMoreConfig.unPrinter == 0
							? 0
							: data.oneMoreConfig.expressInvoice == 0 && data.oneMoreConfig.uniqueCode == 1 && data.oneMoreConfig.unPrinter == 0
								? 1
								: 2,
					moreAutoItemSingle: data.oneMoreConfig.automaticDelivery == 1 ? data.oneMoreConfig.automaticDelivery : 0,
					moreItemSingle: data.oneMoreConfig.notInStockPrint == 1 ? data.oneMoreConfig.notInStockPrint : 0
				});
			}
		}
	};
	//下拉快递列表
	useEffect(() => {}, [moreItemShow, oneItemShow]);
	//获取快递列表
	const getExpressList = async () => {
		const { success, data } = await queryExpressList({
			type: 0 // 可用快递列表 0:自发可用，1:全部可用
		});
		if (success) {
			setExpressList(data);
		} else {
			expressList?.length && setExpressList([]);
		}
	};
	// 设置打印机名称
	const handlePrinterName = (item, name) => {
		setConfigObj({
			...configObj,
			[item.baseExpressName]: name
		});
	};

	useEffect(() => {
		// 从缓存中取出快递和打印机配置数据
		const obj = getExpressRelativePrinter() || {};
		setConfigObj(obj);
		form.setFieldsValue({ ...obj });
		getExpressList();
	}, []);

	useEffect(() => {
		getMakeinventoryConfig();
	}, [visible]);
	const onOk = () => {
		setExpressRelativePrinter(configObj);
		form.validateFields().then(async value => {
			if (value.oneItem == 0) {
				data.oneItemConfig.automaticDelivery = value.oneItemSingle;
				data.oneItemConfig.expressInvoice = 1;
				data.oneItemConfig.uniqueCode = 0;
				data.oneItemConfig.unPrinter = 0;
				data.oneItemConfig.type = 1;
			} else if (value.oneItem == 1) {
				data.oneItemConfig.automaticDelivery = "";
				data.oneItemConfig.uniqueCode = 1;
				data.oneItemConfig.expressInvoice = 0;
				data.oneItemConfig.unPrinter = 0;
			} else {
				data.oneItemConfig.automaticDelivery = "";
				data.oneItemConfig.uniqueCode = 0;
				data.oneItemConfig.expressInvoice = 0;
				data.oneItemConfig.unPrinter = 1;
			}
			if (value.moreItem == 0) {
				console.log(value, "value");
				data.oneMoreConfig.notInStockPrint = value.moreItemSingle;
				data.oneMoreConfig.automaticDelivery = value.moreAutoItemSingle;
				data.oneMoreConfig.expressInvoice = 1;
				data.oneMoreConfig.uniqueCode = 0;
				data.oneMoreConfig.unPrinter = 0;
				data.oneMoreConfig.type = 2;
			} else if (value.moreItem == 1) {
				data.oneMoreConfig.automaticDelivery = "";
				data.oneMoreConfig.notInStockPrint = "";
				data.oneMoreConfig.uniqueCode = 1;
				data.oneMoreConfig.expressInvoice = 0;
				data.oneMoreConfig.unPrinter = 0;
			} else {
				data.oneMoreConfig.automaticDelivery = "";
				data.oneMoreConfig.notInStockPrint = "";
				data.oneMoreConfig.uniqueCode = 0;
				data.oneMoreConfig.expressInvoice = 0;
				data.oneMoreConfig.unPrinter = 1;
			}
			data.oneItemConfig.value = "一单一货";
			data.oneMoreConfig.value = "一单多货";

			let res = { success: true };
			res = await checkprintruleUpdateOp(data);
			if (res.success) {
				setExpressRelativePrinter(configObj);
				message.success("修改配置成功！");
				handleOk(value);
				fetchList();
			}
		});
	};
	return (
		<CommonModal title={{ title: "清点规则设置" }} visible={true} okText="保存" width="588px" onOk={onOk} onCancel={handleCancel}>
			<Form name="qingdian-rules-config" form={form}>
				<SubTitle symbol as="s2" title={`完成清点打印规则`} wrapStyle={{ marginBottom: 16 }} />
				<div style={{ marginLeft: 8 }}>
					<Form.Item name="oneItem" label="一单一货打印规则">
						<Radio.Group onChange={e => setOneItemShow(e.target.value == 0 ? 1 : 0)}>
							<Radio style={{ marginRight: 50 }} value={0}>
								快递面单
							</Radio>
							<Radio style={{ marginRight: 50 }} value={1}>
								唯一码
							</Radio>
							<Radio style={{ marginRight: 50 }} value={2}>
								不打印
							</Radio>
						</Radio.Group>
					</Form.Item>
					{oneItemShow == 1 && (
						<Form.Item name="oneItemSingle" label="是否自动分拣并发货">
							<Radio.Group defaultValue={1}>
								<Radio style={{ marginRight: 50 }} value={1}>
									是
								</Radio>
								<Radio value={0}>否</Radio>
							</Radio.Group>
						</Form.Item>
					)}
					<Form.Item name="moreItem" label="一单多货打印规则" onChange={e => setMoreItemShow(e.target.value == 0 ? 1 : 0)}>
						<Radio.Group>
							<Radio style={{ marginRight: 50 }} value={0}>
								快递面单
							</Radio>
							<Radio style={{ marginRight: 50 }} value={1}>
								唯一码
							</Radio>
							<Radio value={2}>不打印</Radio>
						</Radio.Group>
					</Form.Item>

					{moreItemShow == 1 && (
						<Form.Item name="moreItemSingle" label="货未配齐，是否打印唯一码">
							<Radio.Group defaultValue={1}>
								<Radio style={{ marginRight: 50 }} value={1}>
									是
								</Radio>
								<Radio value={0}>否</Radio>
							</Radio.Group>
						</Form.Item>
					)}
					{moreItemShow == 1 && (
						<Form.Item name="moreAutoItemSingle" label="是否自动分拣并发货">
							<Radio.Group defaultValue={1}>
								<Radio style={{ marginRight: 50 }} value={1}>
									是
								</Radio>
								<Radio value={0}>否</Radio>
							</Radio.Group>
						</Form.Item>
					)}
					{moreItemShow == 1 && (
						<div style={{ fontSize: 12 }}>
							<IconFont type="iconjingshi" style={{ color: "#ccc" }} />
							商品全部到齐时的这一批的多件清点的商品，只打一个快递面单；未配齐时则打印唯一码
						</div>
					)}
				</div>
				<SubTitle symbol as="s2" title={`打印机选择`} wrapStyle={{ marginBottom: 16 }} />
				{oneItemValue == 1 || moreItemValue == 1 || moreItemSingleValue == 1 ? (
					<AntdWrapper label={<div>打印机(唯一码)</div>} style={{ width: "100%", marginLeft: 8 }}>
						<Form.Item name="唯一码">
							<Select
								placeholder="请选择打印机"
								allowClear
								onChange={e => handlePrinterName({ baseExpressName: "唯一码" }, e)}
								value={configObj["唯一码"]}
							>
								{printOptions}
							</Select>
						</Form.Item>
					</AntdWrapper>
				) : (
					""
				)}

				{oneItemValue == 0 || moreItemValue == 0 ? (
					<>
						<div style={{ fontSize: 12, marginLeft: 8 }}>
							<IconFont type="iconjingshi" style={{ color: "#ccc" }} />
							注：若订单没有获取物流单号则打印会跳过处理
						</div>
						{expressList.map(item => (
							<AntdWrapper key={item.id} label={<div>{item.baseExpressName}</div>} style={{ width: "100%", marginLeft: 8 }}>
								<Form.Item name={item.baseExpressName}>
									<Select
										placeholder="请选择打印机"
										allowClear
										onChange={e => handlePrinterName(item, e)}
										value={configObj[item]}
									>
										{printOptions}
									</Select>
								</Form.Item>
							</AntdWrapper>
						))}
					</>
				) : (
					""
				)}
			</Form>
		</CommonModal>
	);
};

export default PrinterConfigModal;
